﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>
                                                            
    <!-- WinJSContrib.Core references -->
    <script src="./scripts/jquery-2.1.1.js"></script>
    <script src="./scripts/winjscontrib/jquery.mcnext.WinJS.js"></script>
    <script src="./scripts/winjscontrib/mcnext.ui.utils.js"></script>

    <!-- WinJSContrib.Hub references -->
    <link href="/css/winjscontrib/mcnext.ui.hub.css" rel="stylesheet" />
    <script src="./scripts/winjscontrib/mcnext.ui.hubcontrol.js"></script>

    <!-- WinJSContrib.Grid references -->
    <script src="./scripts/winjscontrib/mcnext.ui.multipass-renderer.js"></script>
    <script src="./scripts/winjscontrib/mcnext.ui.grid.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="./pages/fixedhub/home.css" rel="stylesheet" />
    <script src="./pages/fixedhub/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment flexhubpage">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">WinJSContrib</span>
            </h1>
            <div class="codelink" data-codepage="./pages/fixedhub/home"><span class="symbol">&#xE160;</span><span class="text">show me the code !</span></div>
        </header>

        <section aria-label="Main content" role="main">
            <div id="semanticzoom" class="mcn-fullsize" data-win-control="WinJS.UI.SemanticZoom">
                <div id="zoomedIn" class="mcn-fullsize" data-win-control="MCNEXT.UI.SemanticZoomWrapper">
                    <div id="pageHub" class="mcn-fullsize" data-win-control="MCNEXT.UI.HubControl" data-win-options="{multipass: 'item'}">
                        <div class="mcn-hub-surface">
                            <div id="section1" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2><span class="mcn-hub-section-title">Section 1<span class="navmark">&#xE013;</span></span></h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{
                                        itemsPerColumn: 2,
                                        itemClassName: 'article',
                                        itemTemplate: '/templates/article.html',
                                        layouts: DefaultFixedGridLayout,
                                        itemInvoked: 'page:itemClick'
                                    }">
                                </div>
                            </div>
                            <div id="section2" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2><span class="mcn-hub-section-title">Section 2<span class="navmark">&#xE013;</span></span></h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{
                                        itemsPerColumn: 2,
                                        itemClassName: 'article',
                                        itemTemplate: '/templates/article.html' ,
                                        layouts:DefaultFixedGridLayout,
                                        itemInvoked: 'ctrl:itemClick'
                                    }">
                                </div>
                            </div>
                            <div id="section3" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2><span class="mcn-hub-section-title">Section 3<span class="navmark">&#xE013;</span></span></h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{
                                        itemsPerColumn: 2,
                                        itemClassName: 'article',
                                        itemTemplate: '/templates/article.html' ,
                                        layouts:DefaultFixedGridLayout,
                                        itemInvoked: 'ctrl:itemClick'
                                    }">
                                </div>
                            </div>
                            <div id="section4" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2><span class="mcn-hub-section-title">Section 4<span class="navmark">&#xE013;</span></span></h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{
                                        itemsPerColumn: 2,
                                        itemClassName: 'article',
                                        itemTemplate: '/templates/article.html' ,
                                        layouts:DefaultFixedGridLayout,
                                        itemInvoked: 'ctrl:itemClick'
                                    }">
                                </div>
                            </div>
                            <div id="section5" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2><span class="mcn-hub-section-title">Section 5<span class="navmark">&#xE013;</span></span></h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{
                                        itemsPerColumn: 2,
                                        itemClassName: 'article',
                                        itemTemplate: '/templates/article.html' ,
                                        layouts:DefaultFixedGridLayout,
                                        itemInvoked: 'ctrl:itemClick'
                                    }">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="zoomedout" class="mcn-fullsize" data-win-control="MCNEXT.UI.SemanticZoomWrapper">
                </div>
            </div>
            <div id="hubtemplate" data-win-control="WinJS.Binding.Template">
                <h2><span class="mcn-hub-section-title"><span data-win-bind="innerText: title"></span><span class="navmark">&#xE013;</span></span></h2>
                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{
                                        itemsPerColumn: 2,
                                        itemClassName: 'article',
                                        itemTemplate: '/templates/article.html' ,
                                        layouts:DefaultFixedGridLayout,
                                        itemInvoked: 'articleClicked'
                                    }">
                </div>
            </div>
        </section>
    </div>
</body>
</html>
